<template>
  <!-- <div> -->
  <div class="LinewEcharts2">
    <div id="line2"></div>
  </div>
  <!-- </div> -->
</template>

<script setup lang="ts">
const echart = inject("echart");
let myChart = null;
import { menuStore } from "@/store/modules/menu";
const menulist = menuStore();
menulist.$subscribe((arg, state) => {  //需要写在数据变化前面
    // console.log('subscribe', arg, state)
    getData()
})
const props = defineProps({
  width: {
    type: String,
    default: "100%"
  },
  height: {
    type: String,
    default: "300px"
  }
});

onMounted(() => {
  initEcharts();
  getData();
});
onUnmounted(() => {
  if (myChart.isDisposed) {
    myChart.clear();
    myChart.dispose();
    myChart = null;
  }
});

const getData = () => {
  renderEcharts();
};
const initEcharts = () => {
  myChart = echart.init(document.getElementById("line2"));
};
const renderEcharts = () => {
  var xdata = [
    "当年完成水量",
    "去年同期水量",
    "滚动目标值水量",
    "全年目标值水量",
    "当年完成金额",
    "去年同期金额",
    "滚动目标金额",
    "全年目标值"
  ];
  var ydata1 = [];
  var ydata2 = [];
  var ydata3 = [];
  xdata.forEach(item => {
    ydata1.push(Math.floor(Math.random() * 80) + 1);
    ydata2.push(Math.floor(Math.random() * 80) + 1);
    ydata3.push(Math.floor(Math.random() * 80) + 1);
  });

  myChart.setOption({
    title: {
      text: "2022年销售水量和主营业务收入对比",
      textStyle: {
        align: "center",
        color: "#fff",
        fontSize: 20
      },
      top: "3%",
      left: "10%"
    },
    // backgroundColor: "#0f375f",
    grid: {
      top: "25%",
      bottom: "10%" //也可设置left和right设置距离来控制图表的大小
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        label: {
          show: true
        }
      }
    },
    legend: {
      data: ["销售水量", "主营业务"],
      top: "15%",
      textStyle: {
        color: "#ffffff"
      }
    },
    xAxis: {
      data: [
        "当年完成水量",
        "去年同期水量",
        "滚动目标值水量",
        "全年目标值水量",
        "当年完成金额",
        "去年同期金额",
        "滚动目标金额",
        "全年目标值"
      ],
      axisLine: {
        show: true, //隐藏X轴轴线
        lineStyle: {
          color: "#01FCE3"
        }
      },
      axisTick: {
        show: true //隐藏X轴刻度
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ebf8ac" //X轴文字颜色
        }
      }
    },
    yAxis: [
      {
        type: "value",
        name: "亿元",
        nameTextStyle: {
          color: "#ebf8ac"
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: true
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#FFFFFF"
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#ebf8ac"
          }
        }
      },
      {
        type: "value",
        name: "同比",
        nameTextStyle: {
          color: "#ebf8ac"
        },
        position: "right",
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          formatter: "{value} %", //右侧Y轴文字显示
          textStyle: {
            color: "#ebf8ac"
          }
        }
      },
      {
        type: "value",
        gridIndex: 0,
        min: 50,
        max: 100,
        splitNumber: 8,
        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
          }
        }
      }
    ],
    series: [
      {
        name: "销售水量",
        type: "line",
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        smooth: true, //平滑曲线显示
        showAllSymbol: true, //显示所有图形。
        symbol: "circle", //标记的图形为实心圆
        symbolSize: 15, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: "#0f375f",
          borderColor: "#fff",
          borderWidth: 2
        },
   lineStyle: {
        normal: {
          color: "rgb(53, 3, 62)",
          width: 3,
          shadowColor: "rgba(0,0,0,0.4)",
          shadowBlur: 10,
          shadowOffsetX: 4,
          shadowOffsetY: 10,
        },
      },
        areaStyle: {
          color: "rgba(5,140,255, 0.2)"
        },
        z: 5,
        data: ydata1
      },
      {
        name: "销售水量1",
        type: "line",
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        smooth: true, //平滑曲线显示
        showAllSymbol: true, //显示所有图形。
        symbol: "circle", //标记的图形为实心圆
        symbolSize: 8, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: "#ff0",
          borderColor: "#ff0"
        },
        lineStyle: {
          normal: {
            color: "rgb(253, 3, 62)",
            width: 3,
            shadowColor: "rgba(0,0,0,0.4)",
            shadowBlur: 10,
            shadowOffsetX: 4,
            shadowOffsetY: 10
          }
        },
        areaStyle: {
          color: "rgba(5,140,255, 0.2)"
        },
        z: 6,
        data: ydata2
      },
      {
        name: "主营业务",
        type: "bar",
        barWidth: 15,
        itemStyle: {
          normal: {
            color: new echart.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#00FFE3"
              },
              {
                offset: 1,
                color: "#4693EC"
              }
            ])
          }
        },
        data: ydata3
      }
    ]
  });
};
window.addEventListener("resize", () => {
  //监听浏览器大小去改变图表尺寸
  myChart.resize();
});
</script>

<style scoped>
.LinewEcharts2 {
  height: 100%;
  width: 100%;
  /* height: 500px; */
  /* background-color: aliceblue; */
}

#line2 {
  height: 100%;
  width: 100%;
  /* background-color: aliceblue; */
}
</style>